<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Plus CRUD示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/element-plus@2.3.6/dist/index.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.6/dist/index.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409EFF',
                        success: '#67C23A',
                        warning: '#E6A23C',
                        danger: '#F56C6C',
                        info: '#909399',
                        dark: '#303133',
                        medium: '#606266',
                        light: '#909399',
                        lighter: '#C0C4CC',
                        border: '#DCDFE6',
                        background: '#F5F7FA',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .hover-lift {
                transform: translateY(0);
                transition: transform 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-3px);
            }
            .animate-fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            .loading-spinner {
                border-top-color: #409EFF;
                animation: spinner 0.6s linear infinite;
            }
            @keyframes spinner {
                to { transform: rotate(360deg); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 sticky top-0 z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-table text-primary text-2xl"></i>
            <h1 class="text-xl font-semibold text-primary">数据管理系统</h1>
        </div>
        <div class="flex items-center space-x-4">
            <div class="hidden md:flex items-center space-x-4">
                <a href="#" class="text-medium hover:text-primary transition-all-300 flex items-center">
                    <i class="fa fa-home mr-1"></i>首页
                </a>
                <a href="#" class="text-medium hover:text-primary transition-all-300 flex items-center">
                    <i class="fa fa-bar-chart mr-1"></i>统计
                </a>
                <a href="#" class="text-primary border-b-2 border-primary pb-1 flex items-center">
                    <i class="fa fa-database mr-1"></i>数据管理
                </a>
            </div>
            <div class="flex items-center space-x-2">
                <button class="p-2 rounded-full hover:bg-gray-100 transition-all-300">
                    <i class="fa fa-bell-o text-medium"></i>
                </button>
                <div class="flex items-center space-x-2">
                    <img src="https://picsum.photos/id/1005/40/40" alt="头像" class="w-8 h-8 rounded-full object-cover border border-gray-200">
                    <span class="text-sm font-medium hidden md:inline">管理员</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-6">
    <!-- 页面标题和操作区 -->
    <div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
        <div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-1">数据管理</h2>
            <p class="text-light">管理系统中的所有数据，支持增删改查操作</p>
        </div>
        <div class="mt-4 md:mt-0 flex items-center space-x-3">
            <div class="relative">
                <input
                        type="text"
                        placeholder="搜索..."
                        class="w-full md:w-64 pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all-300"
                        v-model="searchQuery"
                        @input="handleSearch"
                >
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-light"></i>
            </div>
            <button
                    class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-all-300 hover-lift"
                    @click="openCreateDialog"
                    :disabled="isLoading"
            >
                <i class="fa fa-plus"></i>
                <span>新增</span>
            </button>
        </div>
    </div>

    <!-- 卡片容器 -->
    <div class="bg-white rounded-xl p-5 card-shadow animate-fade-in">
        <!-- 筛选和操作区 -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-5">
            <div class="flex items-center space-x-3">
                <button
                        class="bg-white hover:bg-gray-50 text-medium border border-gray-200 px-4 py-2 rounded-lg flex items-center space-x-2 transition-all-300"
                        @click="handleRefresh"
                        :disabled="isLoading"
                >
                    <i class="fa fa-refresh"></i>
                    <span>刷新</span>
                </button>
            </div>
        </div>
        <!-- 数据表格 -->
        <div class="overflow-x-auto">
            <!-- 加载状态 -->
            <div v-if="isLoading" class="py-20 flex flex-col items-center justify-center">
                <div class="w-12 h-12 border-4 border-gray-200 rounded-full loading-spinner mb-4"></div>
                <p class="text-medium">正在加载数据...</p>
            </div>
            <!-- 表格内容 -->
            <div v-else>
                <table class="w-full text-left border-collapse">
                    <thead>
                    <tr class="bg-gray-50 border-y border-gray-200">
                        <th class="px-4 py-3 text-xs font-semibold text-medium uppercase tracking-wider">
                            <div class="flex items-center">
                                <input type="checkbox" class="rounded text-primary focus:ring-primary">
                            </div>
                        </th>
                        <th class="px-4 py-3 text-xs font-semibold text-medium uppercase tracking-wider cursor-pointer hover:text-primary transition-all-300">
                            <div class="flex items-center space-x-1">
                                <span>姓名</span>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-xs font-semibold text-medium uppercase tracking-wider cursor-pointer hover:text-primary transition-all-300">
                            <div class="flex items-center space-x-1">
                                <span>邮箱</span>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-xs font-semibold text-medium uppercase tracking-wider cursor-pointer hover:text-primary transition-all-300">
                            <div class="flex items-center space-x-1">
                                <span>角色</span>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-xs font-semibold text-medium uppercase tracking-wider cursor-pointer hover:text-primary transition-all-300">
                            <div class="flex items-center space-x-1">
                                <span>状态</span>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-xs font-semibold text-medium uppercase tracking-wider cursor-pointer hover:text-primary transition-all-300">
                            <div class="flex items-center space-x-1">
                                <span>创建时间</span>
                            </div>
                        </th>
                        <th class="px-4 py-3 text-xs font-semibold text-medium uppercase tracking-wider">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="user in paginatedUsers" :key="user.id" class="border-b border-gray-100 hover:bg-gray-50 transition-all-300">
                        <td class="px-4 py-3">
                            <input type="checkbox" class="rounded text-primary focus:ring-primary">
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center space-x-3">
                                <span class="font-medium">{{ user.id }}</span>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-medium">{{ user.name }}</td>
                        <td class="px-4 py-3">{{ user.age }}</td>
                        <td class="px-4 py-3">{{ user.gender }}</td>
                        <td class="px-4 py-3 text-medium text-sm">{{ user.createdAt }}</td>
                        <td class="px-4 py-3  text-center">
                            <div class="flex items-center space-x-2">
                                <button
                                        class="text-danger hover:text-danger/80 transition-all-300"
                                        @click="openEditDialog(user)"
                                        title="编辑"
                                >
                                <el-button type="primary">编辑</el-button>
                                </button>
                                <button
                                        class="text-danger hover:text-danger/80 transition-all-300"
                                        @click="openDeleteDialog(user)"
                                        title="删除"
                                >
                                <el-button type="danger">删除</el-button>
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 空数据状态 -->
        <div v-if="!isLoading && paginatedUsers.length === 0" class="py-16 flex flex-col items-center justify-center">
            <div class="w-24 h-24 mb-4 bg-gray-50 rounded-full flex items-center justify-center">
                <i class="fa fa-inbox text-4xl text-gray-300"></i>
            </div>
            <h3 class="text-lg font-medium text-medium mb-2">暂无数据</h3>
            <p class="text-light mb-6">没有找到符合条件的数据</p>
            <button
                    class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all-300 hover-lift"
                    @click="handleRefresh"
                    :disabled="isLoading"
            >
                <i class="fa fa-refresh mr-1"></i>刷新数据
            </button>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6 mt-10">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
            <div class="mb-4 md:mb-0">
                <p class="text-medium text-sm">© 2023 数据管理系统. 保留所有权利.</p>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-light hover:text-primary transition-all-300 text-sm">
                    <i class="fa fa-question-circle mr-1"></i>帮助中心
                </a>
                <a href="#" class="text-light hover:text-primary transition-all-300 text-sm">
                    <i class="fa fa-file-text-o mr-1"></i>使用文档
                </a>
                <a href="#" class="text-light hover:text-primary transition-all-300 text-sm">
                    <i class="fa fa-shield mr-1"></i>隐私政策
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- 创建对话框 -->
<div v-show="createDialogVisible" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 animate-fade-in">
    <div class="bg-white rounded-xl w-full max-w-md mx-4 overflow-hidden shadow-xl animate-fade-in">
        <div class="p-5 border-b border-gray-100 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-dark">新增</h3>
            <button @click="createDialogVisible = false" class="text-light hover:text-dark transition-all-300">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5">
            <el-form :model="newUser" :rules="formRules" ref="createFormRef" label-width="100px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="newUser.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="age">
                    <el-input v-model="newUser.email"></el-input>
                </el-form-item>
                <el-form-item label="gender" prop="gender">
                    <el-input v-model="newUser.gender"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="p-5 border-t border-gray-100 flex items-center justify-end space-x-3">
            <button
                    class="px-4 py-2 border border-gray-200 rounded-lg text-medium hover:bg-gray-50 transition-all-300"
                    @click="createDialogVisible = false"
            >
                取消
            </button>
            <button
                    class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300 hover-lift"
                    @click="createUser"
                    :disabled="isApiLoading"
            >
          <span v-if="isApiLoading">
            <i class="fa fa-spinner fa-spin mr-1"></i>
            处理中...
          </span>
                <span v-else>保存</span>
            </button>
        </div>
    </div>
</div>

<!-- 编辑对话框 -->
<div v-show="editDialogVisible" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 animate-fade-in">
    <div class="bg-white rounded-xl w-full max-w-md mx-4 overflow-hidden shadow-xl animate-fade-in">
        <div class="p-5 border-b border-gray-100 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-dark">编辑</h3>
            <button @click="editDialogVisible = false" class="text-light hover:text-dark transition-all-300">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5">
            <el-form :model="editUser" :rules="formRules" ref="editFormRef" label-width="100px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="editUser.name"></el-input>
                </el-form-item>
                <el-form-item label="age" prop="age">
                    <el-input v-model="editUser.age"></el-input>
                </el-form-item>
                <el-form-item label="gender" prop="gender">
                    <el-input v-model="editUser.gender"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="p-5 border-t border-gray-100 flex items-center justify-end space-x-3">
            <button
                    class="px-4 py-2 border border-gray-200 rounded-lg text-medium hover:bg-gray-50 transition-all-300"
                    @click="editDialogVisible = false"
            >
                取消
            </button>
            <button
                    class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300 hover-lift"
                    @click="updateUser"
                    :disabled="isApiLoading"
            >
          <span v-if="isApiLoading">
            <i class="fa fa-spinner fa-spin mr-1"></i>
            处理中...
          </span>
                <span v-else>保存</span>
            </button>
        </div>
    </div>
</div>

<!-- 删除确认对话框 -->
<div v-show="deleteDialogVisible" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 animate-fade-in">
    <div class="bg-white rounded-xl w-full max-w-md mx-4 overflow-hidden shadow-xl animate-fade-in">
        <div class="p-5 border-b border-gray-100 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-dark">确认删除</h3>
            <button @click="deleteDialogVisible = false" class="text-light hover:text-dark transition-all-300">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5">
            <div class="flex items-start space-x-4">
                <div class="mt-1 bg-red-100 p-2 rounded-full">
                    <i class="fa fa-exclamation-triangle text-danger"></i>
                </div>
                <div>
                    <p class="text-medium mb-2">确定要删除 <span class="font-medium">{{ deleteUser.name }}</span> 吗？</p>
                    <p class="text-light text-sm">此操作不可撤销，将永久删除该的所有数据。</p>
                </div>
            </div>
        </div>
        <div class="p-5 border-t border-gray-100 flex items-center justify-end space-x-3">
            <button
                    class="px-4 py-2 border border-gray-200 rounded-lg text-medium hover:bg-gray-50 transition-all-300"
                    @click="deleteDialogVisible = false"
            >
                取消
            </button>
            <button
                    class="px-4 py-2 bg-danger hover:bg-danger/90 text-white rounded-lg transition-all-300 hover-lift"
                    @click="deleteUserConfirmed"
                    :disabled="isApiLoading"
            >
          <span v-if="isApiLoading">
            <i class="fa fa-spinner fa-spin mr-1"></i>
            处理中...
          </span>
                <span v-else>确认删除</span>
            </button>
        </div>
    </div>
</div>

<!-- 成功提示消息 -->
<div v-show="successMessageVisible" class="fixed bottom-4 right-4 bg-success text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 animate-fade-in z-50">
    <i class="fa fa-check-circle"></i>
    <span>{{ successMessage }}</span>
    <button class="ml-4 text-white/70 hover:text-white" @click="successMessageVisible = false">
        <i class="fa fa-times"></i>
    </button>
</div>

<!-- 错误提示消息 -->
<div v-show="errorMessageVisible" class="fixed bottom-4 right-4 bg-danger text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 animate-fade-in z-50">
    <i class="fa fa-exclamation-circle"></i>
    <span>{{ errorMessage }}</span>
    <button class="ml-4 text-white/70 hover:text-white" @click="errorMessageVisible = false">
        <i class="fa fa-times"></i>
    </button>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                // 数据
                users: [],
                total: 0,

                // API配置
                apiBaseUrl: "http://127.0.0.1:9000",

                // 筛选和搜索
                searchQuery: '',
                statusFilter: 'all',
                roleFilter: 'all',
                dateRange: null,
                showMoreActions: false,

                // 分页
                currentPage: 1,
                pageSize: 10,

                // 对话框状态
                createDialogVisible: false,
                editDialogVisible: false,
                deleteDialogVisible: false,

                // 表单数据
                newUser: {
                    name: '',
                    age: '',
                    gender: ''
                },
                editUser: {},
                deleteUser: {},

                // 表单验证规则
                formRules: {},
                // 表单引用
                createFormRef: null,
                editFormRef: null,

                // 消息提示
                successMessageVisible: false,
                successMessage: '',
                errorMessageVisible: false,
                errorMessage: '',

                // 加载状态
                isLoading: false,
                isApiLoading: false
            }
        },

        computed: {
            // 当前页的列表
            paginatedUsers() {
                return this.users;
            }
        },

        mounted() {
            // 页面加载时获取数据
            this.fetchUsers();
        },

        methods: {
            // 构建API请求参数
            buildApiParams() {
                const params = {
                    page: this.currentPage,
                    pageSize: this.pageSize,
                    search: this.searchQuery,
                    status: this.statusFilter === 'all' ? '' : this.statusFilter,
                    role: this.roleFilter === 'all' ? '' : this.roleFilter
                };

                // 处理日期范围
                if (this.dateRange && this.dateRange.length === 2) {
                    params.startDate = this.dateRange[0];
                    params.endDate = this.dateRange[1];
                }

                return params;
            },

            // 获取列表
            fetchUsers() {
                this.isLoading = true;

                // 构建请求URL和参数
                const url = `${this.apiBaseUrl}/api/user/list`;
                const params = this.buildApiParams();

                // 发送GET请求
                axios.get(url, { params })
                    .then(response => {
                        // 处理成功响应
                        console.log(response.data.data)
                        this.users = response.data.data;
                        this.total = response.data.total;
                        this.showSuccessMessage('数据加载成功');
                    })
                    .catch(error => {
                        // 处理错误响应
                        console.error('获取列表失败:', error);
                        this.showErrorMessage('获取列表失败，请稍后重试');
                    })
                    .finally(() => {
                        // 无论成功失败都结束加载状态
                        this.isLoading = false;
                    });
            },

            // 刷新数据
            handleRefresh() {
                this.fetchUsers();
            },

            // 打开创建对话框
            openCreateDialog() {
                this.newUser = {
                    name: '',
                    age: '',
                    gender: 'user'
                };
                this.createDialogVisible = true;
            },

            // 创建
            createUser() {
                this.$refs.createFormRef.validate(valid => {
                    if (valid) {
                        this.isApiLoading = true;

                        // 发送POST请求
                        axios.post(`${this.apiBaseUrl}/api/user`, this.newUser)
                            .then(response => {
                                // 处理成功响应
                                this.createDialogVisible = false;
                                this.fetchUsers(); // 刷新列表
                                this.showSuccessMessage('创建成功');
                            })
                            .catch(error => {
                                // 处理错误响应
                                console.error('创建失败:', error);
                                let errorMsg = '创建失败，请稍后重试';
                                if (error.response && error.response.data && error.response.data.message) {
                                    errorMsg = error.response.data.message;
                                }
                                this.showErrorMessage(errorMsg);
                            })
                            .finally(() => {
                                // 无论成功失败都结束加载状态
                                this.isApiLoading = false;
                            });
                    }
                });
            },

            // 打开编辑对话框
            openEditDialog(user) {
                this.editUser = { ...user };
                this.editDialogVisible = true;
            },

            // 更新
            updateUser() {
                this.$refs.editFormRef.validate(valid => {
                    if (valid) {
                        this.isApiLoading = true;

                        // 发送PUT请求
                        axios.put(`${this.apiBaseUrl}/api/user/${this.editUser.id}`, this.editUser)
                            .then(response => {
                                // 处理成功响应
                                this.editDialogVisible = false;
                                this.fetchUsers(); // 刷新列表
                                this.showSuccessMessage('信息更新成功');
                            })
                            .catch(error => {
                                // 处理错误响应
                                console.error('更新失败:', error);
                                let errorMsg = '更新失败，请稍后重试';
                                if (error.response && error.response.data && error.response.data.message) {
                                    errorMsg = error.response.data.message;
                                }
                                this.showErrorMessage(errorMsg);
                            })
                            .finally(() => {
                                // 无论成功失败都结束加载状态
                                this.isApiLoading = false;
                            });
                    }
                });
            },

            // 打开删除对话框
            openDeleteDialog(user) {
                this.deleteUser = user;
                this.deleteDialogVisible = true;
            },

            // 确认删除
            deleteUserConfirmed() {
                this.isApiLoading = true;

                // 发送DELETE请求
                axios.delete(`${this.apiBaseUrl}/api/user/${this.deleteUser.id}`)
                    .then(response => {
                        // 处理成功响应
                        this.deleteDialogVisible = false;
                        this.fetchUsers(); // 刷新列表
                        this.showSuccessMessage('删除成功');
                    })
                    .catch(error => {
                        // 处理错误响应
                        console.error('删除失败:', error);
                        let errorMsg = '删除失败，请稍后重试';
                        if (error.response && error.response.data && error.response.data.message) {
                            errorMsg = error.response.data.message;
                        }
                        this.showErrorMessage(errorMsg);
                    })
                    .finally(() => {
                        // 无论成功失败都结束加载状态
                        this.isApiLoading = false;
                    });
            },

            // 显示成功消息
            showSuccessMessage(message) {
                this.successMessage = message;
                this.successMessageVisible = true;

                // 3秒后自动关闭
                setTimeout(() => {
                    this.successMessageVisible = false;
                }, 3000);
            },

            // 显示错误消息
            showErrorMessage(message) {
                this.errorMessage = message;
                this.errorMessageVisible = true;

                // 3秒后自动关闭
                setTimeout(() => {
                    this.errorMessageVisible = false;
                }, 3000);
            }
        }
    });

    // 注册Element Plus组件
    app.use(ElementPlus);

    // 挂载应用
    app.mount('body');
</script>
</body>
</html>
